<template>
  <el-drawer v-model="drawer" :direction="direction" size="40%">
    <template #header="{ close, titleId, titleClass }">
      <h4 :id="titleId" :class="titleClass">
        <h4>{{ role.rname }} 角色树</h4>
      </h4>
      <el-button type="danger" @click="doloadauth(role.roleid)">
        <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
        加载权限
      </el-button>
    </template>
    <template #default>
      <sysinfo-tree></sysinfo-tree>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="cancelClick">cancel</el-button>
        <el-button type="primary" @click="confirmClick">confirm</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import useRoleStore from '@/stores/role.js'

import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import { storeToRefs } from 'pinia'
import SysinfoTree from './SysinfoTree.vue'
import useSysinfoStore from '@/stores/sysinfo.js'
const roleStore = useRoleStore()

const sysinfoStore = useSysinfoStore()

const { drawer, role } = storeToRefs(roleStore)

const direction = ref('rtl')

const doloadauth = (roleid) => {
  console.log(roleid)

  sysinfoStore.loadAuth4Role(roleid)
}

const confirmClick = (done) => {
  ElMessageBox.confirm('Are you sure you want to close this?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}
</script>
